<template>
  <a-card
      v-if="visible"
      :title="title"
      :loading="loading"
      :width="720"
  >
    <a-form
        ref="formRef"
        :model="formData"
    >
      <a-form-item v-if="formData.parentName" name="parentName" label="上级机构">
        <a-input disabled :value="formData.parentName"/>
      </a-form-item>
      <a-form-item name="orgName" label="机构名称" :rules="[{ required: true, message: '请填写机构名称!' }]">
        <a-input v-model:value="formData.orgName"/>
      </a-form-item>
      <a-form-item name="sortIndex" label="排序号">
        <a-input-number v-model:value="formData.sortIndex"/>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button type="primary" @click="handleOk">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance, message } from 'ant-design-vue'
import { Ref } from '@vue/reactivity'
import { useModalForm } from '@/modules/use-modules'
import { saveOrg } from '@/api/sys-org'
import VSelectDictItem from '@/components/VSelectDictItem.vue'

const formRef = ref<FormInstance>() as unknown as Ref<FormInstance>

const {
  formData,
  loading,
  visible,
  title,
  open,
  close
} = useModalForm({}, async (data: any) => {
  return {
    ...data
  }
})

const emits = defineEmits(['ok'])

const handleOk = async () => {
  await formRef.value.validate()
  await saveOrg(formData.value)
  message.success('操作成功')
  emits('ok')
  close()
}
defineExpose({ open })
</script>
